<script setup>
import { RouterLink } from 'vue-router';
</script>

<template>
  <nav class="navigation">
    <ul>
      <li><RouterLink to="/">首页</RouterLink></li>
      <li><RouterLink to="/cart">购物车</RouterLink></li>
      <li><RouterLink to="/checkout">结算</RouterLink></li>
    </ul>
  </nav>
</template>

<style scoped>
.navigation {
  background-color: #42b983;
  padding: 10px 20px;
}

.navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.navigation li {
  margin-right: 20px;
}

.navigation a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.navigation a:hover,
.navigation a.router-link-active {
  text-decoration: underline;
}
</style>